<template>
  <div class="reportDetailContainer">
    <div class="wrapper" id="wrapper">
      <!-- 头部 -->
      <van-nav-bar title="物料管理" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
      <div class="wetherCont">
        <!-- 值 -->
        <div class="weather f fb">
          <div class="middleCont_left fl">
            <p class="top">13</p>
            <p class="bot f fc">今日过磅</p>
          </div>
          <div class="middleCont_middle"></div>
          <div class="middleCont_left fl">
            <p class="top">143</p>
            <p class="bot f fc">累计过磅</p>
          </div>
        </div>
      </div>
      <div class="reportCont">
        <!-- 环境评价 -->
        <div class="hjpj">
          <div class="top f fb">
            <div class="left fl">
              <ul class="title_ul f fb">
                <li
                  class="title_li"
                  v-for="(item, index) in titleList"
                  :key="index"
                  :class="{ title_li_act: titleIndex == index }"
                  @click="titleTap(index)"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
          </div>
          <div class="searchCont f">
            <input
              type="text"
              placeholder="请输入车牌号"
              class="searchInput fl"
            />
            <div class="right f fc">
              <van-icon name="search" class="searchicon" />
              搜索
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="materialCont"  v-for="(item,index) in 3" :key="index">
          <div class="headercont f fb">
            <p class="left">2020年10月14日</p>
            <p class="mid">累计过磅5次</p>
            <p class="right f fa">
                <img src="../../imgs/up.png" alt="" class="disimg">
                展开</p>
          </div>
          <ul class="cont_ul">
            <li class="cont_li"  v-for="(item,index) in 3" :key="index" @click="toManager">
              <div class="content f">
                <div class="content_left fl">
                  <div class="top f">
                    <span>2010015-003</span>
                    <span> 13:56</span>
                  </div>
                  <div class="bottm f">
                    <span> 湘A 88888</span>
                    <span> 净重 15t</span>
                  </div>
                </div>
                <div class="content_right f fc"><van-icon name="arrow" class="rightArroe" /></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //日历

      titleList: ["过磅记录", "供应商", "材料种类", "材料盈余"],
      titleIndex: 0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    //去历史数据
    toManager() {
      this.$router.push({ path: "/materialManger" }); 
    },
    //标题切换
    titleTap(index) {
      this.titleIndex = index;
    },
  },
};
</script>
<style lang="stylus" scoped>
@import '../../assets/common';

.searchCont {
  width: 100%;
  margin-bottom: 30px;

  .searchInput {
    height: 56px;
    background: #FFFFFF;
    box-shadow: 0px 5px 16px 0px rgba(70, 70, 70, 0.26);
    border-radius: 5px;
    padding-left: 30px;
    box-sizing: border-box;
  }

  .right {
    width: 120px;
    height: 56px;
    margin-left: 15px;
    background: #699FFF;
    box-shadow: 0px 5px 16px 0px rgba(70, 70, 70, 0.26);
    border-radius: 5px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: #FFFFFF;

    .searchicon {
      font-size: 32px;
      margin-right: 15px;
    }
  }
}

.materialCont {
  width: 100%;

  .headercont {
    width: 100%;
    height: 65px;
    background: #1982FF;
    color: #FFFFFF;
    font-family: Microsoft YaHei;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 5rpx 5rpx 0 0;

    .left {
      font-size: 28px;
      font-weight: 600;
    }

    .mid {
      font-size: 24px;
    }

    .right {
      width: 113px;
      height: 44px;
      background: #1982FF;
      border: 1px solid #FFFFFF;
      border-radius: 5px;
      font-size: 24px;
      .disimg{
          width:24px;
          height :20px; 
      }
    }
  }

  .cont_ul {
    width: 100%;

    .cont_li {
      width: 100%;
      height: 141px;
      background: #FFFFFF;
      box-shadow: 0px 14px 16px 0px rgba(43, 102, 253, 0.07);
      border-radius: 5px;
      margin-bottom: 30px;

      .content {
        width: 100%;
        height: 100%;

        .content_left {
          width: 100%;
          height: 100%;
          border-right: 1px solid rgba(40, 40, 40, 0.2);

          .top {
            width: 100%;
            height: 50%;
            border-bottom: 1px solid rgba(40, 40, 40, 0.2);
            padding-left: 15px;
            box-sizing: border-box;

            span {
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #595959;
              margin-right: 100px;
            }
          }

          .bottm {
            width: 100%;
            height: 50%;
            padding-left: 15px;
            box-sizing: border-box;

            span {
              font-size: 28px;
              font-family: Microsoft YaHei;
              font-weight: 600;
              color: #282828;
              margin-right: 100px;
            }
          }
        }

        .content_right {
          width: 130px;
          flex-shrink: 0;
          height: 100%;
          .rightArroe{
              font-size :40px;
             font-weight :bold;
             color :#878585;
          }
        }
      }
    }
  }
}
</style>